<template>
  <div class="task-page">
    <form-item title="话题">
      <field-item class="field-item--primary" disabled :value="topic" />
    </form-item>
    <form-item title="创作感受/想法" required top="18" bottom="30">
      <field-textarea v-model="form.comment" placeholder="创作这幅作品时,我的感受/想法是......" />
    </form-item>
    <form-item title="文件类型" top="18" bottom="30">
      <van-radio-group v-model="form.result" direction="horizontal" @change="resetPics">
        <van-radio name="img">图片</van-radio>
        <van-radio name="video">视频</van-radio>
      </van-radio-group>
    </form-item>
    <form-item v-if="form.result === 'img'" title="图片" required :top="18">
      <upload-img-group v-model="form.pics" :limit="4" />
    </form-item>

    <form-item v-else title="视频" required :top="18">
      <upload-video v-model="form.pics" />
    </form-item>

    <form-item title="是否公开" top="18" bottom="40">
      <van-radio-group v-model="form.isShow" direction="horizontal">
        <van-radio :name="1">是</van-radio>
        <van-radio :name="0">否</van-radio>
      </van-radio-group>
    </form-item>

    <fixed-bottom>
      <button-group confirm-text="发布" @confirm="save" @cancel="back" />
    </fixed-bottom>
  </div>
</template>

<script>
import FormItem from '@/components/FormItem.vue'
import FieldItem from '@/components/FieldItem.vue'
import FieldTextarea from '@/components/FieldTextarea.vue'
import UploadImgGroup from '@/components/UploadImgGroup'
import { getComment, save } from './api'
import FixedBottom from '@/components/FixedBottom'
import ButtonGroup from '@/components/ButtonGroup.vue'
import Taro from '@tarojs/taro'
import { RadioGroup, Radio } from 'vant'
import UploadVideo from '@/components/UploadVideo'

export default {
  components: {
    ButtonGroup,
    FormItem,
    FieldItem,
    FieldTextarea,
    UploadImgGroup,
    FixedBottom,
    [RadioGroup.name]: RadioGroup,
    [Radio.name]: Radio,
    UploadVideo
  },
  data() {
    return {
      topic: '',
      form: {
        articleId: undefined,
        comment: '',
        pics: [],
        result: 'img',
        isShow: 1
      },
      query: {}
    }
  },
  onLoad(options) {
    const { id, topic, taskId } = options
    this.query = options
    this.topic = '#' + topic + '#'
    this.form.articleId = id
    taskId && this.getDetail(taskId)
  },
  methods: {
    async getDetail(id) {
      const { comment, pics = [], isShow } = await getComment(id)
      this.form.comment = comment
      this.form.pics = pics
      this.form.isShow = isShow
      this.form.result = pics.some(item => item.includes('?video')) ? 'video' : 'img'
      // this.form.pics = ['https://www.changqingshu.club//renzhi-admin/editor_attached/media/20230214/62_1669477866.mp4']
    },
    resetPics(name) {
      if (name === 'video' && this.form.pics.some(item => item.includes('?video'))) {
        return
      }
      this.form.pics = []
    },
    async save() {
      await save(this.form)
      Taro.showToast({
        title: '发布成功',
        icon: 'success',
        duration: 2000
      })
      setTimeout(() => {
        this.query.taskId ? this.back() : this.detailBack({ type: 'lesson', id: this.query.id })
      }, 1500)
    }
  }
}
</script>

<style lang="less">
@import './index.less';
</style>
